div[name="DOC"].timeline {
  padding-left: 32px;
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 3px;
    width: 2px;
    height: 100%;
    background: var(--brand-main);
  }

  h2 {
    position: relative;

    td-code,
    code {
      padding: 2px 12px;
      border-radius: 3px;
      background: var(--bg-color-tag);
      margin-left: 24px;
      color: var(--text-primary);
      font-size: 20px;
    }

    &::before {
      content: '';
      position: absolute;
      left: -32px;
      width: 8px;
      height: 8px;
      border: 2px solid var(--brand-main);
      background: var(--bg-color-docpage);
      outline: 8px solid var(--bg-color-docpage);
      box-sizing: border-box;
      border-radius: 50%;
      z-index: 10;
    }

    &:last-of-type {
      &::after {
        content: '';
        position: absolute;
        top: 30px;
        left: -32px;
        z-index: 10;
        width: 8px;
        height: 9999px;
        background: var(--bg-color-docpage);
      }
    }
  }

  h3 {
    font-size: 20px;
    line-height: 28px;
  }
}
